<template>
    <div class="common-layout">
        <el-row>
            <el-container>
                <el-aside width="120px">
                    <Aside />
                </el-aside>
                <el-container style="display: block">
                    <!--实现拖拽效果 https://alfred-skyblue.github.io/vue-draggable-plus/guide/ -->
                    <el-row>
                        <el-col :span="leftSpan">
                            <PipelineList />
                        </el-col>
                        <el-col :span="rightSpan">
                            <div v-if="action === 'welcome'">
                                <Welcome />
                            </div>
                            <div v-else-if="action === 'detail'">
                                <pipeline v-model:pipeline="showPipeline"></pipeline>
                            </div>
                            <div v-else-if="action === 'edit'">
                                <pipeline v-model:pipeline="showPipeline"></pipeline>
                            </div>
                            <div v-else-if="action === 'plugin'">
                                <pipeline v-model:pipeline="showPipeline"></pipeline>
                            </div>
                        </el-col>
                        <el-col :span="chatSpan">
                            <!-- <PluginConfig v-model:plugin="plugin"/> -->
                            <div v-if="action === 'edit'">
                                <PipelineConfig v-model:pipeline="showPipeline" />
                            </div>
                            <div v-else-if="action === 'plugin'">
                                <PipelineConfig v-model:pipeline="showPipeline" />
                                <!-- <PluginConfig v-model:plugin="plugin" /> -->
                            </div>

                            <!-- <Chat v-model:plugin="showPlugin" /> -->
                        </el-col>
                    </el-row>
                </el-container>
            </el-container>
        </el-row>
    </div>
</template>
<script setup>
import { ref, reactive, provide } from 'vue';
import Aside from '@/pages/layout/Aside.vue'
import Pipeline from './components/Pipeline.vue';
import PipelineList from './components/PipelineList.vue';
import Welcome from './components/Welcome.vue';
import PipelineConfig from './components/PipelineConfig.vue';
import PluginConfig from '@/pages/plugin/components/PluginConfig.vue';
import { emitter } from '@/global.js';

const leftSpan = ref(6)
const rightSpan = ref(18)
const chatSpan = ref(0)


const showPipeline = ref({})
const plugin = ref({})
const action = ref('welcome') //detail,edit,welcome,plugin

const setLayout = (actionName) => {
    console.log('按钮点击，createview中收到了点击的值');
    if (action.value === 'edit') {
        leftSpan.value = 0
        rightSpan.value = 18
        chatSpan.value = 6
    } else if (action.value === 'detail') {
        leftSpan.value = 6
        rightSpan.value = 18
        chatSpan.value = 0
    }
}

const userAction = (pipeline, actionName) => {
    if (pipeline) {
        showPipeline.value = pipeline
    }
    action.value = actionName
    setLayout(actionName)
}
provide('userAction', userAction)

emitter.on('plugin', (obj) => {
    plugin.value = obj.data
    userAction(showPipeline.value, 'plugin')
});
</script>

<style scoped>
.edit {
    height: 100vh;
}
</style>